<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Drawer 抽屉</title>
	<!-- import CSS -->
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- import Vue before Element -->
	<!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script> -->
	<script src="../static/js/vue.min.js"></script>
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
	<script src="../static/js/element2.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">呼出一个临时的侧边栏，支持上下左右四个方向。</p>
	<el-radio-group v-model="direction">
		<el-radio label="ltr">left to right</el-radio>
		<el-radio label="rtl">right to left</el-radio>
		<el-radio label="ttb">top to bottom</el-radio>
		<el-radio label="btt">bottom to top</el-radio>
	</el-radio-group>
	<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>
	<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
		<span style="margin-left: 20px;">我来啦!</span>
	</el-drawer>
	
	
	
	
	
	
	<el-divider content-position="left">自定义</el-divider><!-- =============================================================== -->
	<p class="desc">呼出一个临时的侧边栏，包含iframe。</p>
	<el-button @click="editClient" type="primary" style="margin-left: 16px;">点击打开</el-button>
	<el-drawer :visible.sync="show_edit" :title="title_edit" @close="drawerClose" direction="ltr" size="70%">
		<div style="bottom: 0px;height: 100%;">
			<iframe :src="src_edit" id="iframe_body" frameborder="0" width="100%" height="100%"></iframe>
		</div>
	</el-drawer>
</div>
</body>
<script>
let vm = new Vue({
	el: '#app',
	data() {
		return {
			direction: 'rtl',
			drawer: false,
			msg: '测试。',
			show_edit: false,
			title_edit: '',
			src_edit: '',
			
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？').then(_ => {
				done();
			}).catch(_ => {
				
			});
		},
		//抽屉式展示员工操作
		editClient(){
			console.log("editClient");
			this.show_edit = true;
			this.title_edit = "编辑信息。。";
			this.src_edit = "../base/demo.html";
		},
		drawerClose(){
			console.log('关闭了show_edit')
		},
	},
})
</script>
</html>